<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="include :: header('编辑活动成员')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
	<!-- 绑定后端传递的activityMember实体 -->
	<form class="form-horizontal m" id="form-member-edit" th:object="${activityMember}">
		<!-- 隐藏ID字段 -->
		<input type="hidden" name="id" th:field="*{id}" />

		<!-- 活动ID（不可编辑） -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">活动ID：</label>
			<div class="col-sm-8">
				<input class="form-control" type="number" name="activityId" th:field="*{activityId}" readonly>
				<span class="help-block m-b-none text-danger" th:if="${activityMember.activityId == null}">
					活动ID不能为空，请检查数据
				</span>
			</div>
		</div>

		<!-- 用户ID（不可编辑） -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">用户ID：</label>
			<div class="col-sm-8">
				<input class="form-control" type="number" name="userId" th:field="*{userId}" readonly>
				<span class="help-block m-b-none text-danger" th:if="${activityMember.userId == null}">
					用户ID不能为空，请检查数据
				</span>
			</div>
		</div>

		<!-- 成员角色（可编辑） -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">成员角色：</label>
			<div class="col-sm-8">
				<select name="role" id="role" class="form-control" th:field="*{role}" required>
					<option value="">请选择</option>
					<option value="1">团长</option>
					<option value="2">团员</option>
				</select>
			</div>
		</div>

		<!-- 报名状态（可编辑） -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">报名状态：</label>
			<div class="col-sm-8">
				<select name="joinStatus" id="joinStatus" class="form-control" th:field="*{joinStatus}" required>
					<option value="">请选择</option>
					<option value="0">已报名</option>
<!--					<option value="1">已成团</option>-->
					<option value="2">已取消</option>
				</select>
				<span class="help-block m-b-none text-info">修改状态将影响活动参与人数统计</span>
			</div>
		</div>

		<!-- 创建时间（不可编辑） -->
		<div class="form-group">
			<label class="col-sm-3 control-label">创建时间：</label>
			<div class="col-sm-8">
				<input class="form-control" type="text"
					   th:value="${activityMember.createTime != null ? #dates.format(activityMember.createTime, 'yyyy-MM-dd HH:mm') : ''}"
					   readonly>
			</div>
		</div>

	</form>
</div>

<th:block th:include="include :: footer" />
<script th:inline="javascript">
	var prefix = ctx + "system/member";
	// 从后端实体直接获取关键数据
	var originalData = {
		id: [[${activityMember.id}]],
		activityId: [[${activityMember.activityId}]],
		userId: [[${activityMember.userId}]],
		joinStatus: [[${activityMember.joinStatus}]]
	};

	$(function() {
		// 初始化校验：确保关键ID存在
		if (!originalData.activityId || !originalData.userId) {
			$.modal.alertError("活动ID或用户ID缺失，无法编辑");
			// 禁用表单提交
			$("form").on("submit", function(e) {
				e.preventDefault();
				return false;
			});
			return;
		}
	});

	$("#form-member-edit").validate({
		onkeyup: false,
		rules: {
			role: { required: true },
			joinStatus: { required: true }
		},
		messages: {
			role: "请选择成员角色",
			joinStatus: "请选择报名状态"
		},
		focusCleanup: true
	});

	function submitHandler() {
		if ($.validate.form()) {
			// 构建提交数据（强制使用后端原始ID）
			var submitData = {
				id: originalData.id,
				activityId: originalData.activityId,
				userId: originalData.userId,
				role: $("#role").val(),
				joinStatus: parseInt($("#joinStatus").val())
			};

			// 状态变更时的特殊处理
			if (submitData.joinStatus !== originalData.joinStatus) {
				$.operate.post(prefix + "/edit", submitData, function() {
					var index = parent.layer.getFrameIndex(window.name);
					parent.layer.close(index);
					parent.$.table.refresh();
				});
			} else {
				// 状态未变更时使用表单序列化
				$.operate.save(prefix + "/edit", $('#form-member-edit').serialize());
			}
		}
	}
</script>
</body>
</html>
